/********** @name: input单行文本组件 @describtion: props: title:字段别名,value:字段值 @author:liubingye @date:2023-02-10 10:29:07 ***********/
<template>
  <div class="text-outer-box expand-form-item">
    <el-form-item :label="props.title" :prop="props.field">
      <el-input v-model="inputVal" :placeholder="placeholderVal" :maxlength="props.setting.maxlength" show-word-limit></el-input>
      <el-button v-if="props.setting.is_keywords" @click="handleGetKeywords" text type="primary" :icon="Magnet" style="padding: 0; height: 15px; margin-top: 10px">抓取</el-button>
      <div v-if="props.children && props.children.length > 0" class="option-box">
        <div class="option-btn" @click="changeChildrenShow">
          <div class="option-btn-icon">
            <span :class="{ plus: childrenShow }"></span>
          </div>
          <p>{{ childrenShow ? "取消" : "拓展" }}</p>
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue"
import { grabKeywords } from "@/api/content"
import { Magnet } from "@element-plus/icons-vue"

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  field: {
    type: String,
    default: "",
  },
  children: {
    type: Array,
    default: () => [],
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  fieldsValue: {
    type: Object,
    default: () => {},
  },
  content: {
    type: String,
    default: "",
  },
  setting: {
    type: Object,
    default: () => {},
  },
})
const content = computed(() => {
  return props.content
})
const emits = defineEmits(["update:value", "update:childrenShow"])
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    emits("update:value", val)
  },
})
const placeholderVal = ref(props.placeholder)
watch(
  () => props.placeholder,
  (val) => {
    placeholderVal.value = val
  }
)
const handleGetKeywords = async () => {
  let res = grabKeywords({ content: content.value })
  inputVal.value = res.data.content
}
</script>

<style scoped lang="scss">
.option-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 15px;
  margin-top: 10px;
  .option-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    .option-btn-icon {
      height: 14px;
      width: 14px;
      background-color: $mainColor;
      position: relative;
      border-radius: 2px;
      margin-right: 5px;
      span {
        display: block;
        height: 100%;
        width: 100%;
      }
      span.plus:after {
        height: 0;
        top: 7px;
      }
      span:before,
      span:after {
        content: "";
        display: block;
        background-color: #fff;
        position: absolute;
        transition: all 0.3s;
      }
      span:before {
        height: 2px;
        width: 10px;
        left: 2px;
        top: 6px;
      }
      span:after {
        height: 10px;
        width: 2px;
        left: 6px;
        top: 2px;
      }
    }
    p {
      font-size: 14px;
      color: $mainColor;
      margin-right: 10px;
    }
    .editor-more-tips {
      height: 18px;
      width: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffedd2;
      border: 1px solid #ff9700;
      border-radius: 50%;
      span {
        color: #ff9700;
      }
    }
  }
}
</style>
